﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Metro Style Bootstrap</title>
    <link href="metro-style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery.collapser.min.js"></script>
    <script type="text/javascript" src="jquery.highlighter.0.5.min.js"></script>

    <script type="text/javascript">
        $().ready(function () {
            var $leftMenu = $("#leftmenu");
            var $rightMenu = $("#rightmenu");

            $(window).scroll(function () {
                $leftMenu
				    .stop()
				    .animate({ "marginTop": ($(window).scrollTop() + 90) + "px" }, "slow");

                $rightMenu
				    .stop()
				    .animate({ "marginTop": ($(window).scrollTop() + 90) + "px" }, "slow");

            });

            $("#tiles").sortable({
                revert: true,
                hande: "a.move-button",
                stop: function (event, ui) {
                    $(".tile-toolbar", this).hide('fast');
                }
            });

            $(".tile-content").mouseenter(function () {
                $(".tile-toolbar", this).slideToggle('fast');
            }).mouseleave(function () {
                $(".tile-toolbar", this).slideToggle('fast');
            });

            $("#back-button").click(function () {
                $("#tiles").effect("drop", { direction: "right" }, 600);
            });

            $("#save-button").click(function () {

                $("#central").effect("transfer", { to: $("#save-button") }, 600);
            });

            $("#favadd-button").click(function () {
                $("#favs-button").toggleClass("highlight");
                $("#central").effect("transfer", { to: $("#favs-button") }, 1000, function () {
                    $("#favs-button").toggleClass("highlight");
                });
            });


            $(".tile-link,.tile-content>h3").click(function () {
                //$("#central").effect("transfer", { to: $("#save-button") }, 600);
            });

            $(".collapser").collapser({
                target: 'next',
                effect: 'slide',
                changeText: false
            });

            $(".noclick").click(function (event) {
                event.stopPropagation();
            });

            $("#version-selector-button,#versions-button").collapser({
                target: '#version-selector-space',
                effect: 'slide',
                changeText: false
            });

            $("#favs-button").collapser({
                target: '#favs-space',
                effect: 'slide',
                changeText: false
            }, function () {
                $('body,html').animate({
                    scrollTop: 0
                }, 600);
            });

            $("#add-button").collapser({
                target: '#add-space',
                effect: 'slide',
                changeText: false
            }, function () {
                $('body,html').animate({
                    scrollTop: 0
                }, 600);
            });

            $("#prompt-button").collapser({
                target: '#prompt-space',
                effect: 'slide',
                changeText: false
            }, function () {
                $('body,html').animate({
                    scrollTop: 0
                }, 600);
            });

        });
    </script>
</head>
<body>
    <div id="container" class="clearfix">
        <ul id="leftmenu">
            <li id="logo"></li>
            <li id="back-button"></li>
            <li id="favs-button"></li>
            <li id="prompt-button"></li>
        </ul>
	    <div id="central">
	        <div id="header">
		        <ul id="topmenu">
                    <li><a href="">Desktop</a></li>
                    <li><a href="">Content</a></li>
                    <li><a href="">Media</a></li>
                    <li><a href="">Search</a></li>
                    <li><a href="">System</a></li>
                </ul>
	        </div>

	        <div id="footer">
		        
	        </div>

            <div id="breadcrumb">
                <span>Content</span> / <span>ComputerShop</span> / <span>Go Ahead</span> / <span>Pet Slimmer comes to ZA</span> <span id="version-selector-button">(en-ZA, 1)</span>
            </div>

            <div id="version-selector-space">
                <table>
                    <tr>
                        <th>Language</th>
                        <th>Versions</th>
                    </tr>
                    <tr>
                        <td>en-ZA</td>
                        <td><span>1</span> <span>2</span> <span>3</span></td>
                    </tr>
                    <tr>
                        <td>cs-CZ</td>
                        <td><span>1</span> <span>2</span></td>
                    </tr>
                </table>
            </div>

            <div id="prompt-space">
                            
            </div>

            <div id="add-space" class="one-space-only">
                <h1>Create new subnode</h1>
                <h2 class="collapser">1. step - fill new node details</h2>

                <h2 class="collapser">2. step - choose template</h2>
                <ul class="small-tiles clearfix">
                    <li class="tile green">
                        <div class="tile-content">
                            <h3>Obyčejný uzel</h3>
                        </div>
                    </li>
                    <li class="tile blue">
                        <div class="tile-content">
                            <h3>Obyčejný uzel</h3>
                        </div>
                    </li>
                    <li class="tile orange">
                        <div class="tile-content">
                            <h3>Obyčejný uzel</h3>
                        </div>
                    </li>
                    <li class="tile green">
                        <div class="tile-content">
                            <h3>Obyčejný uzel</h3>
                        </div>
                    </li>
                </ul>
                
            </div>

            <div id="favs-space" class="one-space-only">
                <h1>Favorite nodes</h1>
                <div class="loading"></div>
            </div>

            <div id="current-node">
            <h1 id="bigtitle">Pet Slimmer comes to ZA</h1>
            <div id="space">
                <ul id="node-editor">
                    <li>
                        <h2 class="collapser">
                            Subnodes
                            <img src="icons/add.png" />
                            <input type="text" class="noclick" />
                        </h2>
                        <ul id="tiles" style="display:block;margin-left:8px;margin-top:12px;" class="clearfix">
                    <li class="tile green">
                        <div class="tile-content">
                            <h3>ComputerShop Web</h3>
                            <div class="tile-toolbar">
                                <div><a href="javascript:void()" class="delete-button"></a></div>
                                <div><a href="javascript:void()" class="delete-button"></a></div>
                            </div>
                            <a href="javascript:void()" class="tile-link"></a>
                        </div>
                    </li>
                    <li class="tile blue">
                        <div class="tile-content">
                            <h3>Partners Website - latest and greatest version and probably even better</h3>
                            <div class="tile-toolbar">
                                <div><a href="javascript:void()" class="delete-button"></a></div>
                                <div><a href="javascript:void()" class="delete-button"></a></div>
                                <div><a href="javascript:void()" class="delete-button"></a></div>
                                <div><a href="javascript:void()" class="delete-button"></a></div>
                            </div>
                            <a href="javascript:void()" class="tile-link"></a>
                        </div>
                    </li>
                    <li class="tile green">
                        <div class="tile-content">
                            <h3>New world Order</h3>
                            <div class="tile-toolbar">
                                <div><a href="javascript:void()" class="move-button"></a></div>
                                <div><a href="javascript:void()" class="delete-button"></a></div>
                                <div><a href="javascript:void()" class="delete-button"></a></div>
                                <div><a href="javascript:void()" class="delete-button"></a></div>
                            </div>
                            <a href="javascript:void()" class="tile-link"></a>
                        </div>
                    </li>
                    <li class="tile green">První tile</li>
                    <li class="tile green">První tile</li>
                    <li class="tile orange">První tile</li>
                    <li class="tile orange">První tile</li>
                    <li class="tile blue">První tile</li>
                    <li class="tile blue">První tile</li>
                    <li class="tile green">První tile</li>
                    <li class="tile orange">První tile</li>
                    <li class="tile blue">První tile</li>
                    <li class="tile blue">První tile</li>
                    <li class="tile blue">První tile</li>
                    <li class="tile blue">První tile</li>
                    <li class="tile blue">První tile</li>
                    <li class="tile blue">První tile</li>
                    <li class="tile blue">První tile</li>
                    <li class="tile blue">První tile</li>
                    <li class="tile blue">První tile</li>
                </ul>                            
                    </li>
                    <li>
                        <h2 class="collapser">
                            Versions
                            <img src="icons/add.png" />
                        </h2>
                        <div class="fields" id="Div1">
                            
                        </div>
                    </li>
                    <li>
                        <h2 class="collapser">
                            Common
                            <img src="icons/add.png" />
                        </h2>
                        <div class="fields" id="fields-common">
                            
                        </div>
                    </li>
                    <li>
                        <h2 class="collapser">
                            Page <span>(Page Title, Footer Title, ...)</span>
                            <img src="icons/add.png" />
                        </h2>
                        <div class="fields" style="display: none;">
                            <h4>Page Title:</h4>
                            <input type="text" class="textfield" />
                            
                            <h4>Footer Title:</h4>
                            <input type="text" class="textfield" />

                            <h4>Footer Content:</h4>
                            <textarea class="textareafield" rows="8"></textarea>

                        </div>
                    </li>
                    <li>
                        <h2 class="collapser">
                            SEO Optimizations
                            <img src="icons/add.png" />
                        </h2>
                        <div class="fields" style="display: none;">
                            <h4>Page Description:</h4>
                            <textarea class="textareafield" rows="4"></textarea>
                            
                            <h4>Page Keywords:</h4>
                            <input type="text" class="textfield" />

                        </div>
                    </li>
                </ul>

            </div>
            </div>
	    </div>

	    <ul id="rightmenu">
            <li id="versions-button"></li>
            <li id="add-button"></li>
		    <li id="save-button"></li>
            <li id="refresh-button"></li>
            <li id="upload-button"></li>
            <li id="favadd-button"></li>
	    </ul>
    </div>
</body>
</html>